import {ref, h, computed} from 'vue';
import {useRouter} from 'vue-router';
import { HomeOutlined } from '@ant-design/icons-vue';

// 定义菜单项
export const MENU_ITEMS = [
  {
    key: '/',
    icon: () => h(HomeOutlined),
    label: '首页',
    title: '首页',
  },
  {
    key: '/tech',
    label: '科技',
    title: '科技',
  },
  {
    key: '/sports',
    label: '体育',
    title: '体育',
  },
  {
    key: '/games',
    label: '游戏',
    title: '游戏',
  },
  {
    key: '/amusement',
    label: '娱乐',
    title: '娱乐',
  },
  {
    key: '/auto',
    label: '汽车',
    title: '汽车',
  },
];

// 创建菜单高亮的逻辑
export function useMenu() {
  const router = useRouter();
  const current = ref<string[]>([]);

  // 监听路由变化，更新高亮菜单项
  router.afterEach((to) => {
    current.value = [to.path];
  });

  // 路由跳转事件
  const doMenuClick = ({ key }) => {
    router.push({ path: key });
  };

  return {
    items: ref(MENU_ITEMS),
    current,
    doMenuClick,
  };
}
